<template>
  <div class="logo" :class="{ 'logo-animated': animated }">
    <svg
      class="logo-svg"
      :width="size"
      :height="size"
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
        </linearGradient>
        <filter id="logoGlow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
          <feMerge>
            <feMergeNode in="coloredBlur"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>

      <!-- 主要形状 -->
      <path
        class="logo-path"
        d="M20 20 L80 20 Q85 20 85 25 L85 75 Q85 80 80 80 L20 80 Q15 80 15 75 L15 25 Q15 20 20 20 Z"
        fill="url(#logoGradient)"
        filter="url(#logoGlow)"
      />

      <!-- 内部装饰 -->
      <path
        class="logo-inner"
        d="M30 30 L70 30 L70 70 L30 70 Z"
        fill="none"
        stroke="white"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />

      <!-- 中心图标 -->
      <path
        class="logo-center"
        d="M40 50 L50 40 L60 50 L50 60 Z"
        fill="white"
        opacity="0.9"
      />

      <!-- 装饰线条 -->
      <line
        class="logo-line"
        x1="35" y1="35" x2="45" y2="35"
        stroke="white"
        stroke-width="1.5"
        stroke-linecap="round"
      />
      <line
        class="logo-line"
        x1="55" y1="35" x2="65" y2="35"
        stroke="white"
        stroke-width="1.5"
        stroke-linecap="round"
      />
    </svg>

    <div v-if="showText" class="logo-text">
      <span class="logo-text-main">Alex</span>
      <span class="logo-text-sub">Chen</span>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  size?: number
  animated?: boolean
  showText?: boolean
}

withDefaults(defineProps<Props>(), {
  size: 40,
  animated: true,
  showText: false
})
</script>

<style scoped>
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.logo-animated .logo-svg {
  animation: logoFloat 3s ease-in-out infinite;
}

.logo-animated .logo-path {
  animation: logoPulse 2s ease-in-out infinite;
}

.logo-animated .logo-inner {
  animation: logoRotate 4s linear infinite;
  transform-origin: center;
}

.logo-animated .logo-center {
  animation: logoScale 2s ease-in-out infinite;
}

.logo-animated .logo-line {
  animation: logoLine 3s ease-in-out infinite;
}

.logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo-text-main {
  font-size: 1.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.logo-text-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1;
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes logoPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes logoRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes logoScale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes logoLine {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* 悬停效果 */
.logo:hover .logo-svg {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.logo:hover .logo-path {
  filter: url(#logoGlow) brightness(1.1);
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .logo-text-sub {
    color: rgba(255, 255, 255, 0.7);
  }
}
</style>

<style>
/* 全局SVG样式 */
svg {
  transition: all 0.3s ease;
}

path, line {
  transition: all 0.3s ease;
}
</style>

<style lang="scss">
// SCSS变量
$logo-primary: #667eea;
$logo-secondary: #764ba2;
$logo-animation-duration: 3s;

.logo {
  // Logo悬停混合器
  @mixin logo-hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba($logo-primary, 0.3));
  }

  &:hover {
    .logo-svg {
      @include logo-hover;
    }
  }
}
</style>

<style lang="less">
// Less变量和混合器
@logo-size: 40px;
@logo-primary: #667eea;
@logo-secondary: #764ba2;

.logo-svg {
  .transition(all, 0.3s, ease);
}

.transition(@property, @duration, @timing) {
  transition: @property @duration @timing;
}
</style>
 
<style type="text/scss">
/* SCSS内联样式 */
.logo-svg {
  @include transition(all, 0.3s, ease);
}

@mixin transition($property, $duration, $timing) {
  -webkit-transition: $property $duration $timing;
  -moz-transition: $property $duration $timing;
  -o-transition: $property $duration $timing;
  transition: $property $duration $timing;
}
</style>

<style lang="postcss">
/* PostCSS样式 */
.logo-svg {
  transition: all 0.3s ease;
  &:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
</style>

<style module>
/* CSS Modules样式 */
.logo {
  composes: flex items-center from global;
  gap: 0.5rem;
}

.logoSvg {
  transition: all 0.3s ease;
}

.logoSvg:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
}
</style>

<style scoped module>
/* Scoped CSS Modules样式 */
.logo {
  composes: flex items-center from global;
  gap: 0.5rem;
}

.logoSvg {
  transition: all 0.3s ease;
}

.logoSvg:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
}
</style>